import React, { memo, Suspense } from "react";
import "@/App.css";
import { useRoutes } from "react-router-dom";
import routes from "@/router";
import Header from "@/components/header";
import Aside from "@/components/aside/aside";
import { CollapseProvider } from "@/views/context/CollapseContext";

const App: React.FC = () => (
  <CollapseProvider>
    <div className="app">
      <div className="sider">
        <Aside />
      </div>
      <div className="main">
        <div className="header">
          <Header />
        </div>
        <Suspense>
          <div className="content">{useRoutes(routes)}</div>
        </Suspense>
      </div>
    </div>
  </CollapseProvider>
);

export default memo(App);
